<template>
  <div class="close" @click="goBack">X</div>
  <div class="detail">
    <div class="detailTop">
      <van-swipe class="my-swipe" lazy-render :show-indicators="isshow">
        <van-swipe-item v-for="image in imagesList" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="detailPrice">
        <div class="price">
          <div class="priceFu">￥</div>
          <div class="pricePr">{{ goodsDetail.price }}</div>
          <div class="priceYh">优惠价</div>
        </div>
        <div class="sales">已售{{ goodsDetail.sales }}</div>
      </div>
      <div class="detailName">
        {{ goodsDetail.name }}
      </div>
    </div>
    <div class="detailFoot">
      <div class="item add">加入购物车</div>
      <div class="item buy">立即购买</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, onActivated, onDeactivated } from 'vue'
import http from '@/common/api/request.js'
import { useRoute, useRouter } from 'vue-router'
import APIS from '@/common/api/api.js'
import { useAppStore } from '@/stores'

let isshow = ref(true)
onMounted(() => {
  fetchGoodsInfo()
  goodsId.value = route?.query?.id || 0
})
onBeforeUnmount(() => {
  sStore.setTabbarStatus(true)
})

onActivated(() => {
  sStore.setTabbarStatus(false)
  if (route.query.id !== goodsId.value) {
    fetchGoodsInfo()
    goodsId.value = route.query.id
  }
})
onDeactivated(() => {
  sStore.setTabbarStatus(true)
})

const sStore = useAppStore()
let route = useRoute()
const router = useRouter()
let goodsId = ref(0)
let goodsDetail = ref({})
let imagesList = ref([])
const fetchGoodsInfo = async () => {
  let res = await http.$axios({
    url: APIS.getGoodsInfo,
    params: {
      id: route?.query?.id,
    },
  })
  goodsDetail.value = res?.data
  imagesList.value = res?.data?.images?.split(',') || []
}
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
.close {
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 999;
}

.detail {
  background-color: #fff;
}

.detail .detailTop .my-swipe .van-swipe-item {
  width: 100%;
  height: 10.375rem;
  text-align: center;
}

.detail .detailTop .detailPrice {
  width: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6375rem 0.325rem 0.325rem 0.325rem;
  box-sizing: border-box;
}

.detail .detailTop .detailPrice .price {
  display: flex;
  align-items: center;
}

.detail .detailTop .detailPrice .price .priceFu {
  font-size: 0.375rem;
}

.detail .detailTop .detailPrice .price .pricePr {
  font-weight: 600;
}

.detail .detailTop .detailPrice .price .priceYh {
  font-size: 0.3125rem;
  margin-left: 0.1875rem;
  background-color: rgb(255, 236, 239);
  color: rgb(255, 68, 102);
  padding: 0.0625rem 0.0625rem;
}

.detail .detailTop .detailPrice .sales {
  font-size: 0.375rem;
  color: #666;
}

.detail .detailTop .detailName {
  padding: 0rem 0.325rem 0.325rem 0.325rem;
  font-size: 0.4375rem;
}

.detail .detailFoot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  /* background-color: red; */
}

.detail .detailFoot .item {
  width: 50%;
  text-align: center;
  line-height: 1rem;
  height: 100%;
  font-size: 0.4375rem;
}

.detail .detailFoot .add {
  background-color: rgb(255, 236, 239);
  color: rgb(255, 68, 102);
}

.detail .detailFoot .buy {
  background-color: rgb(255, 87, 119);
  color: rgb(255, 255, 255);
}
</style>
